<!-- src/views/LoginHistory.vue -->

<script setup lang="ts">
import { ref } from "vue";
import { Card, CardHeader, CardTitle, CardContent, CardDescription } from "@/components/ui/card";
import { Table, TableHeader, TableBody, TableHead, TableRow, TableCell, } from "@/components/ui/table";
import { Button } from "@/components/ui/button";

const loginRecords = ref([
  {
    id: 1,
    time: "2023-06-01 14:30:00",
    device: "iPhone 12",
    os: "IOS",
    ip: "192.168.1.1",
    location: "北京",
  },
  {
    id: 2,
    time: "2023-05-30 09:15:00",
    device: "MacBook Pro",
    ip: "192.168.1.2",
    os: "Win10",
    location: "上海",
  },
  {
    id: 3,
    time: "2023-05-28 18:45:00",
    device: "iPad Air",
    ip: "192.168.1.3",
    os: "Win10",
    location: "广州",
  },
  {
    id: 4,
    time: "2023-05-25 10:00:00",
    device: "Nick Pro",
    ip: "192.168.1.4",
    os: "Android",
    location: "深圳",
  },
]);
</script>

<template>
  <div>
    <Card>
      <CardHeader>
        <CardTitle class="text-2xl font-bold tracking-tight">
          登录记录
        </CardTitle>
        <CardDescription class="text-muted-foreground">
          ni***k4，以下是您最近3个月的登录记录，若存在异常登录记录，请尽快
          <Button variant="link" as="a" href="/account/information/password">
            修改密码
          </Button>
        </CardDescription>
      </CardHeader>
      <CardContent>
        <div class="rounded-md border">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>时间</TableHead>
                <TableHead>设备</TableHead>
                <TableHead>系统</TableHead>
                <TableHead>地点</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              <TableRow v-for="record in loginRecords" :key="record.id">
                <TableCell>{{ record.time }}</TableCell>
                <TableCell>{{ record.device }}</TableCell>
                <TableCell>{{ record.os }}</TableCell>
                <TableCell>{{ record.location }}</TableCell>
              </TableRow>
            </TableBody>
          </Table>
        </div>
      </CardContent>
    </Card>
  </div>
</template>
